<template>
  <el-dialog :title="'详情页'" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-form class="verify-form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
    <el-row>
      <el-col :span="8" v-if="dataForm.id">
        <el-form-item label="发票号" prop="billId">
          <el-input v-model="dataForm.billId" placeholder="发票号"  disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="dataForm.createTime" placeholder="创建时间"  disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="制造商">
          <el-input v-model="dataForm.supplyName" :disabled="dataForm.id !=0">
            <el-button slot="append" @click="supplySearchHandle">选择</el-button>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="创建部门">
          <el-input v-model="dataForm.createDeptName" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人" prop="createUserName">
          <el-input v-model="dataForm.createUserName" placeholder="创建人" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发票类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择套餐类型" :disabled="dataForm.id !=0">
            <el-option label="采购普通发票" value="1"></el-option>
            <el-option label="采购增值税发票" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="审核人">
          <el-input v-model="dataForm.auditUserName" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="审核日期">
          <el-input v-model="dataForm.auditTime" placeholder="审核日期" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="订单备注" prop="memo">
      <el-input type="textarea" v-model="dataForm.memo" placeholder="订单备注" :disabled="dataForm.id !=0"></el-input>
    </el-form-item>

    <el-tabs type="border-card">
        <el-divider content-position="left">单据信息</el-divider>
        <el-row v-if="!dataForm.id">
          <el-button type="primary" icon="el-icon-plus" @click.prevent="addRow()">选择单据</el-button>
          <el-button type="primary" icon="el-icon-delete" @click.prevent="delData()">删除</el-button>
        </el-row>
        <div class="avue-crud">
          <el-table :data="dataForm.detailList" border @selection-change="handleSelectionChange" show-summary  :summary-method="getSummaries">
            <el-table-column prop="invoiceTicket" header-align="center" align="center" label="来票号"></el-table-column>
            <el-table-column prop="costPrice" header-align="center" align="center" label="成本合计"></el-table-column>
            <el-table-column prop="taxPrice" header-align="center" align="center" label="税额合计"></el-table-column>
            <el-table-column prop="allPrice" header-align="center" align="center" label="价税合计"></el-table-column>
          </el-table>
        </div>
      </el-tabs>
    <!-- 弹窗，查询制造商 -->
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import {getObj, addObj, putObj} from '@/api/eims/invoice'
    import SearchSupply from '@/components/business/SearchSupply'
    import {mapGetters} from 'vuex'
    import {getDeptInfo} from '@/api/admin/dept'
    export default {
    data () {
      return {
        visible: false,
        supplyVisible: false,
        dataForm: {
          id: 0,
          billId: '',
          type: '',
          supplyId: '',
          supplyName: '',
          status: '',
          memo: '',
          createDeptId: '',
          createDeptName : '',
          createTime: '',
          createUser: '',
          createUserName: '',
        },
        deptOptions: [],
        detailList: [],
        dataRule: {
          type: [
            { required: true, message: '发票类型(1-普通发票,2-增值税发票)不能为空', trigger: 'blur' }
          ],
          supplyName: [
            { required: true, message: '制造商名称不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    components: {
      SearchSupply
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      init (id) {
        this.dataForm.id =id
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
            getObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            })
        })
      },
      //  合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            if(index == 1||index == 2||index == 3){
              sums[index] = '合计： ' + values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
            }
          }
        });
        return sums;
      },
    }
  }
</script>
<style lang="scss" scoped>
  /deep/ .el-table {
  display: flex;
  flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
  order: 1;
  }
  /deep/ .bgChange {
    color: red!important;
  }
</style>
